<template>
	<view style="background-color: #F5F5F5;">
		<!-- 顶部导航栏 -->
		<dev-navbar isPageStack title="人体成分分析报告领用"></dev-navbar>
		<!-- <navbars id="navbar" name="人体成分分析报告领用"></navbars> -->
		<!-- 中间内容 -->
		<view class="center-boxs">
			<!-- 头像 可拍照 -->
			<view class="avatar-box">
				<!-- 头像 -->
				<view class="head-portrait">
					<image :src="result.avatarUrl"></image>
				</view>
				<!-- 昵称 -->
				<view class="">

				</view>

			</view>
			<!-- 个人信息 -->
			<view class="customer-information">
				<!-- 手机号 -->
				<!-- <view class="every-list-box">
					<view class="label-name">
						<sapn class="must-stars">*</sapn> 手机号
					</view>
					<view class="input-box positioning-box">
						<input @input="monitorInput" @focus="openSearch" v-model="result.phone" type="number" maxlength="11"
							value="" />

						<image @tap.stop="turnOffSearch()"
							src="http://static.bsyjk.cn/l/011D2C21369346E680A9F0CE8D5F0F16.png"
							style="width: 20upx;height: 11upx;" mode=""></image>


						<view class="search-box" v-show="search_show">
							<view class="each-list" :class="is_choose && phone==item.phone ?'each-list-choose':''"
								@tap.stop="selectCustomer(item)" v-for="(item,index) in new_box" :key="index">
								<view class="full-name">
									{{item.nickName}}
								</view>
								<view class="cell-phone-number">
									{{item.phone}}
								</view>
							</view>

						</view>

					</view>
				</view> -->
				<!-- 姓名 -->
				<view class="every-list-box">
					<view class="label-name">
						<sapn class="must-stars">*</sapn>姓名/昵称
					</view>
					<view class="input-box">
						<input style="width: 100%;height: 100%;" v-model="result.nickName" type="text" value="" />
					</view>
				</view>
				<!-- 性别 -->
				<view class="every-list-box">
					<view class="label-name">
						<sapn class="must-stars">*</sapn> 性别
					</view>
					<!-- 单选 -->
					<view class="radio-box">

						<u-radio-group v-model="result.sex" @change="radioGroupChange">
							<u-radio active-color="#FF333A" @change="radioChange" v-for="(item, index) in list"
								:key="index" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>

					</view>

				</view>

				<view class="every-list-box">
					<view class="label-name">
						<sapn class="must-stars">*</sapn> 生日
					</view>
					<view class="input-box">
						<input v-model="result.birthday" @tap="clickInput('birthday')" :disabled="true" type="text"
							value="" />
					</view>
				</view>

				<view class="every-list-box">
					<view class="label-name">
						<sapn class="must-stars">*</sapn> 身高
					</view>
					<view class="input-box">
						<input v-model="result.height" @tap="clickInput('height')" :disabled="true" type="number"
							value="" />
					</view>
				</view>
			</view>
			<!-- 点击绑定 -->
			<view class="prompt-language">
				请填写正确的个人信息，才能获得准确的人体成分分析报告
			</view>
			<!-- 领取按钮 -->
			<view class="button-box" @tap="getReport">
				领取报告
			</view>

		</view>
		<!-- 年龄 -->
		<lb-picker ref="picker2"
		  v-model="value2"
		  :start-date="starDate" 
		  :end-date="endTime"
		  mode="dateSelector"
		  @change="handleChange"
		  @confirm="handleConfirmSr"
		  @cancel="handleCancel">
		</lb-picker>
		<!-- lb-picker ref="picker2" v-model="value1" :start-date="starDate" :end-date="endTime" mode="dateSelector"
			@change="handleChange" @confirm="handleConfirmSr" @cancel="handleCancel">
		</lb-picker> -->
		<!--身高 -->
		<lb-picker ref="picker3" v-model="value3" mode="unlinkedSelector" :list="list3" @change="handleChange"
			@confirm="handleConfirmH" @cancel="handleCancel">
		</lb-picker>
	</view>
</template>

<script>

function parseUrlParams(url) {
  const paramsObj = {};
  const queryString = url.split('?')[1];
  if (queryString) {
    const paramPairs = queryString.split('&');
    paramPairs.forEach(paramPair => {
      const [key, value] = paramPair.split('=');
      paramsObj[key] = value ? decodeURIComponent(value) : '';
    });
  }
  return paramsObj;
}

	function GetRequest(url) {
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.split('?')[1];
			console.log(str,123)
			let strs = str.split("&");
			for (var i = 0; i < strs.length; i++) {
				theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
				console.log(theRequest,1288888)
			}
		}
		return theRequest;
	}
	// 解码
	function UrlDecode(zipStr) {
        console.info(zipStr,"zipStr")
        var uzipStr = "";
        if(zipStr){
           for (var i = 0; i < zipStr.length; i++) {
           	var chr = zipStr.charAt(i);
           	if (chr == "+") {
           		uzipStr += " ";
           	} else if (chr == "%") {
           		var asc = zipStr.substring(i + 1, i + 3);
           		if (parseInt("0x" + asc) > 0x7f) {
           			uzipStr += decodeURI("%" + asc.toString() + zipStr.substring(i + 3, i + 9).toString());
           			i += 8;
           		} else {
           			uzipStr += AsciiToString(parseInt("0x" + asc));
           			i += 2;
           		}
           	} else {
           		uzipStr += chr;
           	}
           } 
        }
		return uzipStr;
	}

	function StringToAscii(str) {
		return str.charCodeAt(0).toString(16);
	}

	function AsciiToString(asccode) {
		return String.fromCharCode(asccode);
	}
	// end
	// import navbars from '@/components/navigation.vue'
	import lbPicker  from './components/lb-picker/index';


import uRadioGroup from "@/uview-ui/components/u-radio-group/u-radio-group.vue";
import uRadio from "@/uview-ui/components/u-radio/u-radio.vue";
	export default {
		components: {
		  lbPicker,
			uRadioGroup,
			uRadio,

		},
		data() {
			return {
				value2: '2021-01-02',
				value3: [160],
				list3: [],
				starDate: '1900-12-31', //开始时间
				endTime: this.$basejs.thisdayFormat2(false), //结束时间默认今天
				scancode_time: '', //设备时间戳
				eqvalue: '', //设备信息
				result: {
					nickName:'',
					birthday:'',
					height:''
				}, //个人信息
				name: '', //姓名昵称
				phone: '', //手机号
				birthday: '', //生日
				height: '', //身高
				sex: 1, //性别
				avatarUrl: '', //头像
				search_show: false,
				list: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '男',
				customer_information: [], //客户信息
				new_box: [], //临时数据盒子

				birthday_input: false, //生日是否禁用
				sex_choose: false, //性别是否禁用
				height_input: false, //身高是否禁用
				name_input: false, //姓名是否禁用
				avatarUrl_up: false, //是否禁用上传图片
				is_choose: false, //是否已经选择用户


			};
		},
		onLoad(e) {
            //校验用户登录
			this.getScanUserData(e);
		},
		methods: {
            getScanUserData(e){
              let list3 = [];
              for (let i = 100; i < 241; i++) { //身高数组
              	list3.push({
              		value: i,
              		label: i
              	})
              }
              this.list3 = [list3, ['cm']] //身高数组
              if (global.token) {
								const url = decodeURIComponent(decodeURIComponent(e.q));
								// const url3 = UrlDecode(url);
								const paramsObj = parseUrlParams(url);
              	this.eqvalue = paramsObj
                this.scancode_time = paramsObj.scancode_time?paramsObj.scancode_time:''
                 this.getBaseUserInfo()  
              } else {
                  
                    this.$urouter.redirectTo({
                        url: '/pages/signIn/signIn',
                        params: {
                            jumpInterface: '/subpackage/bodyFatScale/bindingReport',
                            transferParameters: JSON.stringify(e)
                        }
                    });
              }
            },
			handleConfirmSr(e) {
				this.value1 = e.value
				this.result.birthday = e.value;
			},
			// 修改身高
			handleConfirmH(e) {
				this.result.height = e.value[0]
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				console.log(e)
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			clickInput(name) {
				console.log(name, 104)
				switch (name) {
					case 'birthday':
						name = 'picker2';
						break;
					case 'height':
						name = 'picker3';
						break;
					default:
						return
				}
				this.$refs[name].show()
			},
			// 性别事件
			radioGroupChange() {

			},
			getReport() {
				this.addScaleData()
			},
			addScaleData() {
				let _this = this,
					result = this.result,
					eqvalue = this.eqvalue;
				if (!result.nickName) {
					uni.showToast({
						title: '请输入姓名/昵称',
						icon:'none',
						duration: 3000
					});
				} else if (!result.birthday) {
					uni.showToast({
						title: '请输入性别',
						icon:'none',
						duration: 3000
					});
				} else if (!result.height) {
					uni.showToast({
						title: '请输入身高',
						icon:'none',
						duration: 3000
					});
				} else {
					let sendData = {
						avatarUrl: result.avatarUrl,
						birthday: result.birthday,
						gender: result.sex == '男' ? 1 : result.sex == '女' ? 2 : 0,
						height: result.height,
						nickName: result.nickName,
						phone: result.phone,
						scale: eqvalue.c,
						sn: eqvalue.sn
					};
					console.log(sendData, '2311111111')
					this.$api.post(global.apiUrls.addScaleData, sendData)
						.then(res => {
							if (res.data.code == 1000) {
								uni.navigateTo({
									url:'/subpackage/bodyFatScale/bodyFatScale?healthDataId='+res.data.result
								})
							}else{
								if(!res.data.message){
									res.data.message = '领取失败'
								}
								uni.showToast({
									title: res.data.message,
									icon:'none',
									duration: 3000
								});
							}
						}).catch(err => {
							uni.showToast({
								title: '请稍后',
								icon:'none',
								duration: 3000
							});
						})
				}

			},
			// 获取用户信息
			getBaseUserInfo() {
				let _this = this;
				this.$loginl.get(global.apiUrls.getBaseUserInfo + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							result.sex = result.sex == '1' ? '男' : result.sex == '2' ? '女' : '未知';
							_this.value3 = [result.height]
							_this.result = result;
							_this.value2 = result.birthday;
						}
					}).catch(err => {})
			},
			//点击领取报告
			receiveBut() {
				//需要先校验一下手机号是否正确

			},
			//循环判断当前客户
			monitorInput() {
				let _this = this;
				let filter_data = []
				this.is_choose = false;
				this.name = '';
				this.sex = 1;
				this.list = [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				];
				this.value = '男';
				this.birthday = '';
				this.avatarUrl = '';
				this.height = '';
				this.birthday_input = false; //生日是否禁用
				this.sex_choose = false; //性别是否禁用
				this.height_input = false; //身高是否禁用
				this.name_input = false; //姓名是否禁用
				this.avatarUrl_up = false; //是否禁用上传图片

				if (this.phone != '') {
					this.customer_information.forEach(function(v, i) {
						// console.log(v.nickName.indexOf(_this.name.toString()) != -1, 'shoujihao')
						if (v.phone.indexOf(_this.phone) != -1 || v.nickName.indexOf(_this.phone) != -1) {
							filter_data.push(v)
						}
					})
					if (filter_data.length == 0) {
						this.turnOffSearch();
					} else {
						this.openSearch()
					}
					this.new_box = filter_data;

				}

			},
			//点击选择客户
			selectCustomer(item) {

				setTimeout(() => {

					if (item.gender != '' && item.gender != null) {
						if (item.gender == 'female') {
							this.sex = 2;
							this.value = '女'
							this.list[0].disabled = true;
							this.list[1].disabled = false;
						} else {
							this.sex = 1;
							this.value = '男'
							this.list[1].disabled = true;
							this.list[0].disabled = false;
						}
						this.sex_choose = true;
					} else {

						this.sex = 1;
						this.value = '男';
						this.list = [{
								name: '男',
								disabled: false
							},
							{
								name: '女',
								disabled: false
							},
						];
					}

					if (item.birthday != '' && item.birthday != null) {
						this.birthday = item.birthday;
						this.birthday_input = true;
					} else {
						this.birthday = '';
						this.birthday_input = false;
					}

					if (item.phone != '' && item.phone != null) {
						this.phone = item.phone;
					} else {
						this.phone = '';
					}

					if (item.nickName != '' && item.nickName != null) {
						this.name = item.nickName;
						this.name_input = true;
					} else {
						this.name = '';
						this.name_input = false;
					}

					if (item.height != '' && item.height != null) {
						this.height = item.height;
						this.height_input = true;
					} else {
						this.height = '';
						this.height_input = false;
					}

					if (item.avatarUrl != '' && item.avatarUrl != null) {
						this.avatarUrl = item.avatarUrl;
						this.avatarUrl_up = true;
					} else {
						this.avatarUrl = '';
						this.avatarUrl_up = false;
					}

					this.turnOffSearch(); //选择完成后关闭弹框
					this.is_choose = true;

				}, 300);


			},
			//关闭搜索
			turnOffSearch() {
				this.search_show = false;
			},
			//打开搜索框
			openSearch() {
				this.new_box = this.customer_information;
				this.search_show = true;
			},
			//获取客户数据
			getCustomerData() {
				this.$https.get(global.apiUrls.getCustomerData, {}).then(res => {
					if (res.data.code == 1000) {
						this.customer_information = res.data.result;
						this.new_box = res.data.result;
					}
					console.log(res, '获取数据')
				}).catch(err => {

				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				if (e == '男') {
					this.sex = 1;
				} else if(e == '女'){
					this.sex = 2;
				}
			},

		}
	}
</script>

<style lang="scss">
	.center-boxs {
		padding: 54rpx 44rpx;

		.avatar-box {
			height: 444upx;
			background-image: url(http://static.bsyjk.cn/l/50428E91EA034C6B8AAD13CB965508F6.png);
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.head-portrait {
				width: 240rpx;
				height: 240rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

			}
		}

		//个人信息盒子
		.customer-information {
			padding: 10upx 0 38upx;
			background-color: #FFFFFF;
			border-radius: 0 0 14upx 14upx;

			.every-list-box {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 38upx;

				.label-name {
					width: 190upx;
					text-align: right;
					font-size: 28upx;
					font-weight: 500;
					color: #333333;

					.must-stars {
						color: #FF333A;
					}
				}

				//输入框
				.input-box {
					margin-left: 20upx;
					width: 418upx;
					height: 80upx;
					background-color: #F5F5F5;
					border-radius: 20upx;
					display: flex;
					align-items: center;
					padding: 0 20upx;
					justify-content: space-between;

				}

				//定位辅助盒子
				.positioning-box {
					position: relative;

					.search-box {
						position: absolute;
						width: 418upx;
						max-height: 480upx;
						background-color: #E0F5FF;
						top: 92upx;
						left: 0;
						border-radius: 20upx;
						overflow: auto;
						z-index: 100;
						padding: 10upx 0;

						.each-list {
							margin-top: 10upx;
							margin-left: 22upx;
							width: 376upx;
							height: 80upx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0upx 20upx;
							font-size: 28upx;
							font-weight: 500;
							color: #333333;

							.full-name {
								max-width: 140upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.cell-phone-number {}
						}

						.each-list-choose {
							background-color: #B4E0F5;
							border-radius: 20upx;
						}


					}

				}

				.radio-box {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					width: 418upx;
					height: 80upx;
				}

			}
		}

		//提示语
		.prompt-language {
			font-size: 20upx;
			font-weight: 400;
			color: #999999;
			line-height: 28upx;
			text-align: center;
			margin-top: 107upx;
		}

		.button-box {
			width: 655upx;
			height: 90upx;
			background-image: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png);
			background-size: 100% 100%;
			border-radius: 45upx;
			text-align: center;
			line-height: 90upx;
			margin-top: 20upx;
			font-size: 34upx;
			color: #FFFFFF;
            //background: linear-gradient(112deg, #54B299 0%, #2EA7E0 100%);
			font-weight: 400;
		}

	}
</style>
